<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<div id="app">
	<p v-for="(item, index) in persons" :key="item.id">
		<span>{{item.id}}</span>
		-----------
		<span>{{item.name}}</span>
		-----------
		<span>{{item.age}}</span>
		-----------
		<span><button @click="delPro(index)">删除</button></span>
		-----------
		<span><button @click="updatePro(index, {id: 22, name: 'krly22', age: 30})">更新</button></span>
	</p>

	<p v-for="(item, key) in persons[0]" :key="item.id">
		{{key}}--{{item}}
	</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			persons: [
				{id: 1, name: 'jack', age: 19},
				{id: 2, name: 'pert', age: 21},
				{id: 3, name: 'jams', age: 28},
				{id: 4, name: 'krly', age: 30}
			]
		},
		methods: {
			delPro: function(index) {
				this.persons.splice(index, 1);
			},
			updatePro: function(index, updateData) {
				//this.persons[index] = updateData;
				this.persons.splice(index, 1, updateData);
			}
		}
	});
</script>
</body>
</html>